<!-- 菜单管理 -->
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { Plus as IconPlus, Expand as IconExpand, Fold as IconFold } from '@element-plus/icons-vue'
import type { IDbAction, IDbTable } from '@/types/global'
import useNotic from '@/hooks/useNotic'
import DuiTable from '@/common-ui/dui-table/index.vue'
import MenuInfo from './comps/MenuInfo.vue'
import { MenuList } from './testdata'

// 表格数据
const tableRef = ref<InstanceType<typeof DuiTable>>()
const tableData = reactive<IDbTable>({
  data: [],
  columns: [
    { label: '菜单名称', prop: 'menuName', align: 'left' },
    { label: '权限标识', prop: 'perms' },
    { label: '组件路径', prop: '' },
    { label: 'path', prop: '' },
    { label: '启用状态', prop: '' },
    { label: '是否隐藏菜单', prop: '' },
    { label: '排序', prop: '' },
    { label: '操作', prop: 'handle', type: 'slot', fixed: 'right' }
  ]
})
// 弹窗数据
const menuInfoRef = ref<InstanceType<typeof MenuInfo>>()
const dialogData = reactive({
  title: '', // 弹窗标题
  disabled: false // 是否禁用弹窗编辑
})

getDataList()

/**
 * 设置按钮列表
 */
function setBtnList(scoped: any) {
  const list: IDbAction[] = [
    { label: '详情', type: 'primary', show: true, onClick: () => infoClick(scoped.row, true) },
    { label: '编辑', type: 'primary', show: true, onClick: () => infoClick(scoped.row, false) },
    { label: '删除', type: 'danger', show: true, onClick: () => delClick(scoped) }
  ]
  return list
}
/**
 * 点击添加
 */
function addClick() {}
/**
 * 点击详情/编辑
 */
function infoClick(row: any, disabled: boolean) {
  dialogData.title = disabled ? '菜单详情' : '编辑菜单'
  dialogData.disabled = disabled
}
/**
 * 点击删除
 */
function delClick(scoped: any) {
  useNotic().confirm(`您确定要删除第${scoped.$index}个菜单吗？`, (flag) => {
    console.log(flag)
  })
}
/**
 * 表格切换全部展开、收起状态
 */
function changeExpendClick(isExpand: boolean) {
  tableRef.value?.setAllRowExpansion(tableData.data, isExpand)
}
/**
 * 获取表格数据
 */
function getDataList() {
  tableData.data = []
  const menuList = JSON.parse(JSON.stringify(MenuList.data)) as any[]
  menuList.forEach((menu: any) => {
    // 根目录
    if (menu.parentId == 0) {
      tableData.data.push(menu)
    }
    // 子目录
    else {
      for (let item of menuList) {
        if (menu.parentId == item.menuId) {
          if (!item.children) {
            item.children = []
          }
          item.children.push(menu)
          break
        }
      }
    }
  })
}
</script>

<template>
  <dui-page>
    <template #btn>
      <el-button type="primary" :icon="IconPlus" @click="addClick">添加菜单</el-button>
      <el-button type="primary" :icon="IconFold" @click="changeExpendClick(false)">全部收起</el-button>
      <el-button type="primary" :icon="IconExpand" @click="changeExpendClick(true)">全部展开</el-button>
    </template>
    <template #default>
      <dui-table
        ref="tableRef"
        :data="tableData.data"
        :columns="tableData.columns"
        :total="tableData.total"
        :search="tableData.search"
        :isPagination="false"
        row-key="menuId"
      >
        <template #handleSlot="scoped">
          <dui-action :list="setBtnList(scoped)" />
        </template>
      </dui-table>
      <!-- 弹窗 -->
      <MenuInfo ref="menuInfoRef" v-bind="dialogData" />
    </template>
  </dui-page>
</template>
